<template>
  <div class="search-content" :style="{top: GLOBAL.currentEnvironment ? '0' : ''}">
    <Search
      ref="topSearch"
      class="search"
      placeholder="盘点单号"
      :isAdd="false"
      :isScreen="false"
      :isType="false"
    ></Search>
    <div class="formgroup">
      <span class="title">盘点状态</span>
      <van-field
        :is-link="!params.inventoryStatusText"
        readonly
        name="picker"
        v-model="params.inventoryStatusText"
        @click="inventoryStatusVisible = true"
        placeholder="请选择"
      >
        <div
          slot="right-icon"
          v-show="!!params.inventoryStatusText"
          @click.stop="isCancel"
        >
          <img
            src="~@/assets/img/filedClear.png"
            alt=""
            style="width: 0.16rem"
          />
        </div>
        <span v-show="delType"></span>
      </van-field>
      <div class="bottomLine"></div>
      <span class="title">盘点类型</span>
      <van-field
        :is-link="!params.inventoryTypeText"
        readonly
        name="picker"
        v-model="params.inventoryTypeText"
        @click="inventoryTypeVisible = true"
        placeholder="请选择"
      >
        <div
          slot="right-icon"
          v-show="!!params.inventoryTypeText"
          @click.stop="itCancel"
        >
          <img
            src="~@/assets/img/filedClear.png"
            alt=""
            style="width: 0.16rem"
          />
        </div>
      </van-field>
      <div class="bottomLine"></div>
      <span class="title">盘点仓库</span>
      <van-field
        :is-link="!params.warehouseText"
        readonly
        name="picker"
        v-model="params.warehouseText"
        @click="warehouseVisible = true"
        placeholder="请选择"
      >
        <div
          slot="right-icon"
          v-show="!!params.warehouseText"
          @click.stop="wtCancel"
        >
          <img
            src="~@/assets/img/filedClear.png"
            alt=""
            style="width: 0.16rem"
          />
        </div>
      </van-field>
    </div>
    <div class="search-bottom">
      <span class="btncancel" @click="cancel">重置</span>
      <span class="btnconfirm" @click="confirm">确定</span>
    </div>
    <van-popup v-model="inventoryStatusVisible" position="bottom">
      <van-picker
        :columns="options1"
        @confirm="inventoryStatusConfirm"
        @cancel="inventoryStatusVisible = false"
        show-toolbar
      />
    </van-popup>
    <van-popup v-model="inventoryTypeVisible" position="bottom">
      <van-picker
        :columns="options2"
        @confirm="inventoryTypeConfirm"
        @cancel="inventoryTypeVisible = false"
        show-toolbar
      />
    </van-popup>
    <van-popup v-model="warehouseVisible" position="bottom">
      <van-picker
        :columns="options3"
        @confirm="warehouseConfirm"
        @cancel="warehouseVisible = false"
        show-toolbar
      />
    </van-popup>
  </div>
</template>

<script>
const formP = {
  inventoryStatus: "",
  inventoryType: "",
  warehouseId: "",
  inventoryStatusText: "",
  inventoryTypeText: "",
  warehouseText: "",
};
import Search from "@/components/search";
export default {
  name: "search",
  components: { Search },
  data() {
    return {
      typeVisible: false,
      inventoryTypeVisible: false,
      warehouseVisible: false,
      inventoryStatusVisible: false,
      rtitle: "",
      rname: "", //search
      params: Object.assign({}, formP),
      options1: [],
      options2: [],
      options3: [],
      treeData: [],
      activeIds: [],
      activeIndex: 0,
      treeItemsList: [],
      delType: false,
    };
  },
  props: {
    propsForSon: {
      type: Object,
      default: {},
    },
  },
  watch: {
    propsForSon(newVal) {
      console.log(newVal, "newValnewVal");
      this.$refs.topSearch.value = newVal.keyword;
      this.params = newVal;
    },
  },
  computed: {},
  created() {},
  methods: {
    // 点击树右侧子项
    clickItem(v) {
      if (!this.treeItemsList.find((item) => item.id == v.id)) {
        this.treeItemsList.push(v);
      }
    },
    inventoryStatusConfirm(v, i) {
      if (!v) {
        this.inventoryStatusVisible = false;
        return;
      }
      this.params.inventoryStatusText = v.text;
      this.params.inventoryStatus = v.value;
      this.inventoryStatusVisible = false;
    },
    isCancel() {
      this.params.inventoryStatusText = "";
      this.params.inventoryStatus = "";
      this.delType = !this.delType;
    },
    itCancel() {
      this.params.inventoryTypeText = "";
      this.params.inventoryType = "";
      this.delType = !this.delType;
    },
    wtCancel() {
      this.params.warehouseText = "";
      this.params.warehouseId = "";
      this.delType = !this.delType;
    },
    inventoryTypeConfirm(v, i) {
      if (!v) {
        this.inventoryTypeVisible = false;
        return;
      }
      this.params.inventoryTypeText = v.text;
      this.params.inventoryType = v.value;
      this.inventoryTypeVisible = false;
    },
    warehouseConfirm(v, i) {
      if (!v) {
        this.warehouseVisible = false;
        return;
      }
      this.params.warehouseText = v.text;
      this.params.warehouseId = v.value;
      this.warehouseVisible = false;
    },
    cancel() {
      this.$refs.topSearch.value = "";
      this.params = Object.assign({}, formP);
    },
    confirm() {
      var keyword = this.$refs.topSearch.value;
      this.$emit("getCategory", this.params, keyword);
    },
  },
};
</script>
<style lang="scss" scoped>
.search-content {
  //  padding-bottom: 0.5rem;
  position: fixed;
  top: 0.35rem;
  width: 100%;
  height: 100vh;
  background: #f5f5f5;
  z-index: 99;
  .formgroup {
    height: calc(100vh - 1.11rem);
    padding-bottom: 0.53rem;
    overflow-y: scroll;
    background: #ffffff;
    // padding: 0 0.16rem;
    margin-top: 0.1rem;
    margin-bottom: 0.2rem;
    padding-top: 0.1rem;

    .title {
      width: 0.58rem;
      height: 0.14rem;
      font-size: 0.15rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #191f25;
      line-height: 0.05rem;
      margin-left: 0.16rem;
    }
  }
  .search-bottom {
    height: 0.5rem;
    width: 100%;
    background: #ffffff;
    // background: red;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 0px;
    padding: 0.11rem;
    font-size: 0.16rem;
    .btnconfirm {
      width: 1.72rem;
      height: 0.39rem;
      background: #1890ff;
      color: #fff;
      border-radius: 0.03rem;
      text-align: center;
      line-height: 0.39rem;
    }
    .btncancel {
      width: 1.72rem;
      height: 0.39rem;
      background: #f6f6f6;
      color: #191f25;
      border: 0.01px solid rgba(25, 31, 37, 0.12);
      border-radius: 0.03rem;
      text-align: center;
      line-height: 0.39rem;
    }
  }
}
.top-btns {
  height: 0.44rem;
  display: flex;
  justify-content: space-between;
  div {
    padding: 0 0.16rem;
    line-height: 0.44rem;
    cursor: pointer;
  }
  .btn-cancel {
    color: #969799;
  }
  .btn-comfirm {
    color: #576b95;
  }
}
.van-sidebar-item--select::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 4px;
  height: 16px;
  background-color: #1890ff;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  content: "";
}
.van-tree-select__item--active {
  color: #1890ff;
}
.bottomLine {
  height: 0.01rem;
  background-color: #f0f0f0;
  margin: 0 0.16rem 0.14rem;
}
</style>